<template>
  <div class="pet-dashboard">
    <!-- 头部区域 -->
    <el-card class="header-section" shadow="hover">
      <el-row align="middle" type="flex" justify="space-between">
        <img
          :src="
            user.pic_url
              ? user.pic_url
              : 'https://via.placeholder.com/50x50.png?text=头像'
          "
          class="avatar"
          alt="User Avatar"
          v-if="!user.pic_url || user.pic_url.startsWith('http')"
        />
        <el-avatar
          :src="
            user.pic_url
              ? user.pic_url
              : 'https://via.placeholder.com/50x50.png?text=头像'
          "
          size="small"
          v-else
        ></el-avatar>

        <el-col :span="12">
          <div class="user-info">
            <!-- 动态宠物选择下拉框 -->
            <select id="species" class="species-select">
              <option value="">请选择物种</option>
              <option
                v-for="species in speciesList"
                :key="species.id"
                :value="species.id"
              >
                {{ species.species }}
              </option>
            </select>
            <!-- <p class="dashboard-subtitle">桂花糕</p> -->
          </div>
        </el-col>
        <el-col :span="6">
          <div class="search-bar">
            <el-input
              placeholder="暴走汪星人"
              prefix-icon="el-icon-search"
              class="search-input"
              v-model="searchMes"
            />
            <!-- 放大镜按钮 -->
            <el-button class="search-button" @click="inforSearch" type="primary">
              <el-icon><Search /></el-icon>
            </el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 功能卡片区域 -->
    <el-card class="feature-cards-section" shadow="hover">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="hover" class="feature-card" @click="toUserChat">
            <el-icon><Doctor /></el-icon>
            <h3>超级医生</h3>
            <p>基于AI深度学习</p>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover" class="feature-card" @click="toEncyclopedia">
            <el-icon><Dog /></el-icon>
            <h3>养宠百科</h3>
            <p>宠物知识全知道</p>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <!-- 养宠工具区域 -->
    <el-card class="tools-section" shadow="hover">
      <h3>养宠小工具</h3>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-button
            type="text"
            icon="el-icon-question"
            @click="toFood"
            class="tool-btn"
          >能不能吃</el-button>
        </el-col>
        <el-col :span="6">
          <el-button
            type="text"
            icon="el-icon-question"
            @click="toActivity"
            class="tool-btn"
          >能不能做</el-button>
        </el-col>
        <el-col :span="6">
          <el-button
            type="text"
            icon="el-icon-medal"
            @click="goFileUpload"
            class="tool-btn"
          >文件上传</el-button>
        </el-col>
        <el-col :span="6">
          <el-button type="text" icon="el-icon-date" class="tool-btn" @click="goGenename"
          >宠物起名</el-button>
        </el-col>
      </el-row>
      
    </el-card>

    <!-- 底部导航栏 -->
    <nav class="bottom-nav">
      <el-row justify="space-around" align="middle">
        <el-col :span="6">
          <el-button type="text" @click="goHome">
            <el-icon class="nav-icon"><House /></el-icon>
            首页
          </el-button>
        </el-col>
        <el-col :span="6">
          <el-button type="text" @click="goPetShop">
            <el-icon class="nav-icon"><Notebook /></el-icon>
            商品分类
          </el-button>
        </el-col>
        <el-col :span="6">
          <el-button type="text" @click="goPetRecords">
            <el-icon class="nav-icon"><Reading /></el-icon> <!-- 改为狗狗图标 -->
            宠物信息
          </el-button>
        </el-col>
        <el-col :span="6">
          <el-button type="text" @click="goInformation">
            <el-icon class="nav-icon"><User /></el-icon>
            我的
          </el-button>
        </el-col>
      </el-row>
    </nav>
  </div>
</template>

<script setup>
import router from "@/router";
import { Doctor, Dog, House, Notebook, User, Paw, Reading, Search} from "@element-plus/icons-vue"; // 引入狗狗图标
import { ref, onMounted, reactive } from "vue";
import axios from "axios";

const searchMes = ref("");
const speciesList = ref([]); // 存储从后端获取的物种数据
const user = reactive({ pic_url: "" });

// 获取物种数据
const fetchSpecies = () => {
  axios
    .get("http://127.0.0.1:8000/index/species/")
    .then((response) => {
      if (response.data && response.data.data) {
        speciesList.value = response.data.data;
      } else {
        console.error("无效的数据格式:", response.data);
      }
    })
    .catch((error) => {
      console.error("无法获取物种数据:", error);
    });
};

// 获取用户信息
onMounted(async () => {
  try {
    const response = await axios.get("http://127.0.0.1:8000/user/info/");
    if (response.data.code === 200) {
      const userData = response.data.data[0];
      user.pic_url = userData.pic_url ? `http://127.0.0.1:8000${userData.pic_url}` : "";
    }
  } catch (error) {
    console.error("Failed to fetch user info:", error);
  }
});

onMounted(fetchSpecies);

// 路由跳转方法
const goFileUpload = () => router.push("/bigfileup");
const toFood = () => router.push("/food");
const toActivity = () => router.push("/activity");
const toEncyclopedia = () => router.push("/encyclopedia");
const inforSearch = () => router.push({ path: "/inforsearch", query: { mes: searchMes.value } });
const goHome = () => router.push("/");
const goPetShop = () => router.push("/petshop");
const goCart = () => router.push("/cart");
const goProfile = () => router.push("/profile");
const goInformation = () => router.push("/information");
const goPetRecords = () => router.push("/record"); // 路由跳转至宠物信息页面
const goGenename = () => router.push("/genename"); 
const toUserChat = () => router.push("/userchat"); 
</script>

<style scoped>
/* 主容器 */
.pet-dashboard {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  background-color: #eef5fb; /* 浅蓝色背景 */
  padding: 30px;
  position: relative;
  min-height: 100vh;
  padding-bottom: 80px; /* 为导航栏预留空间 */
}

/* Header 样式 */
.header-section {
  padding: 20px;
  background-color: #d9edf7; /* 柔和的浅蓝色 */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.user-info {
  font-size: 1.2rem;
  color: #333; /* 深灰色字体 */
}

.species-select {
  font-size: 1rem;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #ddd;
  margin-top: 10px;
  width: 100%;
  max-width: 200px; /* 控制下拉菜单宽度 */
}

.dashboard-subtitle {
  font-size: 14px;
  color: #666;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover; /* 使图片以裁剪方式适应容器 */
}

.search-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f0f8ff; /* 奶油色背景 */
  padding: 10px;
  border-radius: 8px;
  width: 100%;
  max-width: 300px; /* 控制搜索框宽度 */
}

.search-input input {
  border-radius: 20px;
  padding: 8px 15px;
  border: 1px solid #ddd;
  width: 100%;
}

.search-input input:focus {
  border-color: #3498db; /* 聚焦时边框为蓝色 */
  outline: none;
}

.search-button {
  background-color: #3498db; /* 按钮颜色为蓝色 */
  color: white;
  border-radius: 50%;
  padding: 10px;
  margin-left: 10px;
  transition: background-color 0.3s ease;
}

.search-button:hover {
  background-color: #2980b9; /* 按钮悬浮效果 */
}

/* 功能卡片样式 */
.feature-card {
  text-align: center;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.feature-card h3 {
  font-size: 1.5rem;
  margin-top: 10px;
  color: #3498db; /* 主题蓝色 */
}

.feature-card p {
  color: #666666;
}

/* 工具部分样式 */
.tools-section {
  margin-top: 30px;
  padding: 20px;
  background-color: #f0f8ff; /* 柔和奶油色 */
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tools-section h3 {
  margin-bottom: 20px;
  font-size: 1.4em;
}

.tool-btn {
  width: 100%;
  padding: 12px;
  background-color: #b3e5fc; /* 浅蓝色按钮背景 */
  border-radius: 16px;
  font-size: 14px;
  transition: background-color 0.3s ease, transform 0.3s ease;
  color: #03a9f4; /* 深蓝色字体 */
  border: 1px solid #ddd;
}

.tool-btn:hover {
  background-color: #81d4fa;
  transform: translateY(-3px);
}

/* 底部导航栏样式 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff; /* 背景颜色 */
  border-top: 1px solid #ddd; /* 上边框 */
  padding: 10px 0; /* 上下内边距 */
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  z-index: 1000; /* 确保它在最上方 */
}

.nav-icon {
  font-size: 28px; /* 增加图标大小 */
  color: #3498db; /* 主题颜色 */
  margin: 0 4px; /* 图标之间的间距 */
  transition: transform 0.3s ease, color 0.3s ease; /* 平滑过渡效果 */
}

.nav-icon:hover {
  transform: scale(1.2); /* 鼠标悬停时放大 */
  color: #2980b9; /* 鼠标悬停时颜色变深 */
}

.bottom-nav .el-button {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #3498db; /* 蓝色字体 */
  transition: background-color 0.3s ease; /* 背景颜色过渡 */
}

.bottom-nav .el-button:hover {
  background-color: #d9edf7; /* 悬浮效果 */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .bottom-nav .el-button {
    padding: 5px; /* 调整按钮内边距 */
  }

  .nav-icon {
    font-size: 24px; /* 小屏幕时缩小图标 */
  }
}

.feature-card h3,
.feature-card p {
  font-size: 16px;
}

.tool-btn {
  font-size: 14px;
  padding: 10px;
}
</style>
